import React, { Component } from 'react'
import { Link, Switch, Route } from 'react-router-dom'
import MessageContent from './MessageContent'
export default class Message extends Component {
  state = {
    messageArr: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' }
    ]
  }
  render() {
    const { messageArr } = this.state

    return (
      <div>
        <ul>
          {messageArr.map(msg => {
            return (
              <li key={msg.id}>
                {/* 传递params参数 */}
                {/* <Link to={`/home/message/content/${msg.id}`}>{msg.title}</Link> */}

                {/* 传递search参数 */}
                {/* <Link to={`/home/message/content/?id=${msg.id}&title=${msg.title}`}  > {msg.title} </Link> */}

                {/* 传递state参数 */}
                <Link to={{ pathname: '/home/message/content', state: { id: msg.id, title: msg.title } }} > {msg.title} </Link>
              </li>
            )
          })}
        </ul>
        <br />
        {/* 注册路由 */}
        <Switch>
          {/* 接收params参数 */}
          {/* <Route path="`/home/message/content/:id" component={MessageContent} ></Route> */}

          {/* search参数无需特殊接收 */}
          <Route path="/home/message/content" component={MessageContent}></Route>
        </Switch>
      </div>
    )
  }
}
